<template>
    <el-container class="layout-container">
            <el-header class="el-header">
                <el-dropdown placement="bottom-end">
                    <span class="el-dropdown__box">
                        <div>
                            <strong>当前用户：</strong>{{ loginUser.nickName }}
                        </div>
                        <el-icon>
                            <ArrowDownBold />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-main class="layout-bottom-box">
                <div class="left">
                    <el-aside width="200px" class="el-aside">
                        <el-menu class="el-menu" router>
                            <el-menu-item index="/oj/layout/cuser">
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="/oj/layout/question">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>题目管理</span>
                            </el-menu-item>
                            <el-menu-item index="/oj/layout/exam">
                                <el-icon>
                                    <Trophy />
                                </el-icon>
                                <span>竞赛管理</span>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                </div>
                <div class="right">
                    <RouterView />
                </div>
            </el-main>
    </el-container>
</template>
<script setup>
import {
    User,
    Document,
    Trophy,
    ArrowDownBold,
    SwitchButton
} from '@element-plus/icons-vue'

import { getUserInfoService, logoutService } from '@/apis/suser';
import { reactive } from 'vue';
import { removeToken } from '@/utils/cookie';
import router from '@/router';
const loginUser=reactive({
    nickName:''
})
async function getUserInfo() {
    const userInfo=await getUserInfoService();
    loginUser.nickName=userInfo.data.nickName
    
}
getUserInfo();

async function logout(){
    await  ElMessageBox.confirm(
    '确认退出',
    '温馨提示',
    {
      confirmButtonText: '退出', 
      cancelButtonText: '取消',
      type: 'warning',
    }
)
await logoutService()
removeToken()
router.push("/oj/login")



}









</script>
<style lang="scss" scoped>
.layout-container {
    height: 100vh;
    background: #f7f7f7;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .layout-bottom-box {
        display: flex;
        justify-content: space-between;
        flex: 1;
        overflow: hidden;
        padding: 20px;
        gap: 20px;

        .left {
            background: #fff;
            display: flex;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);
            }

            :deep(.el-menu) {
                flex: 1;
                border-radius: 8px;

                .el-menu-item {
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    
                    &.is-active {
                        color: #32c5ff;
                        background: linear-gradient(90deg, rgba(50, 197, 255, 0.1) 0%, transparent 100%);
                        border-right: 3px solid #32c5ff;
                    }

                    &:hover {
                        background: rgba(50, 197, 255, 0.05);
                        color: #32c5ff;
                        transform: translateX(5px);
                    }
                }
            }
        }

        .right {
            flex: 1;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            overflow: hidden;
            position: relative;

            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background: #f5f5f5;
                border-radius: 3px;
            }
        }
    }

    .el-aside {
        background-color: transparent;
        width: 200px !important;

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 60px;
        padding: 0 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        .el-dropdown__box {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            
            &:hover {
                background: #f5f7fa;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

                .el-icon {
                    transform: rotate(180deg);
                }
            }

            .el-icon {
                margin-left: 8px;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    }
}

/* 子页面过渡动画 */
.slide-fade-enter-active {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
}

.slide-fade-enter-from {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
}

.slide-fade-leave-to {
    opacity: 0;
    transform: translateX(-20px) scale(1.05);
}
</style>